<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <header>
    <div class="header-inner">
      <img src="imgs/qqmusic.png" alt="QQ音乐Logo">
    </div>
  </header>

  <main>
    <!-- 歌单推荐 -->
    <div class="section">
      <div class="section-header">
        <h2 class="section-title">歌单推荐</h2>
        <nav class="section-nav">
          <a href="#" class="active">为你推荐</a>
          <a href="#">歌单</a>
          <a href="#">排行榜</a>
          <a href="#">官方歌单</a>
          <a href="#">歌手</a>
        </nav>
      </div>
      <div class="item-grid">
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">翻唱女神J.Fla | 只唱你最爱的旋律</a>
          <div class="item-info">播放量：891.5万</div>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">古风女声控，优美旋律为你而来</a>
          <div class="item-info">播放量：171.3万</div>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">想开一家早餐店，叫“早点见面”</a>
          <div class="item-info">播放量：52.5万</div>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">好评999+英文歌！轻松解压100％</a>
          <div class="item-info">播放量：12394.9万</div>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">书房背景乐 沉浸于字里行间的时光</a>
          <div class="item-info">播放量：303.4万</div>
        </div>
      </div>
    </div>

    <!-- 新歌首发 -->
    <div class="section">
      <div class="section-header">
        <h2 class="section-title">新歌首发</h2>
        <nav class="section-nav">
          <a href="#" class="active">最新</a>
          <a href="#">内地</a>
          <a href="#">港台</a>
          <a href="#">欧美</a>
          <a href="#">韩国</a>
          <a href="#">日本</a>
        </nav>
      </div>
      <div class="song-list-grid">
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg">
          <div class="info">
            <div class="title nowrap">Sabotage</div>
            <div class="singer nowrap"><a href="#">Bebe Rexha</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">02:56</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg">
          <div class="info">
            <div class="title nowrap">如果人人爱音乐</div>
            <div class="singer nowrap"><a href="#">张蔷</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">03:46</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg">
          <div class="info">
            <div class="title nowrap">你就不要想起我</div>
            <div class="singer nowrap"><a href="#">R1SE赵磊</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">04:30</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg">
          <div class="info">
            <div class="title nowrap">软肋</div>
            <div class="singer nowrap"><a href="#">李宇春</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">04:17</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg">
          <div class="info">
            <div class="title nowrap">一爱如故</div>
            <div class="singer nowrap"><a href="#">摩登兄弟刘宇宁</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">03:55</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000hNAwr4dbutH_1.jpg">
          <div class="info">
            <div class="title nowrap">向宿命挥拳的人</div>
            <div class="singer nowrap"><a href="#">阿云嘎</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">04:00</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000dcpok0A8RP3_2.jpg">
          <div class="info">
            <div class="title nowrap">花好月圆</div>
            <div class="singer nowrap"><a href="#">周迅</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">02:34</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000004X1Kbg34UHQ5_1.jpg">
          <div class="info">
            <div class="title nowrap">Renegades</div>
            <div class="singer nowrap"><a href="#">ONE OK ROCK</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">04:04</div>
        </div>
        <div class="song-item">
          <img class="cover" src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000018mpfj0lSvS0_1.jpg">
          <div class="info">
            <div class="title nowrap">驯化者</div>
            <div class="singer nowrap"><a href="#">群星</a></div>
          </div>
          <div class="play-icon"></div>
          <div class="duration">03:28</div>
        </div>
      </div>
    </div>

    <!-- MV -->
    <div class="section">
      <div class="section-header">
        <h2 class="section-title">MV</h2>
        <nav class="section-nav">
          <a href="#" class="active">精选</a>
          <a href="#">内地</a>
          <a href="#">港台</a>
          <a href="#">欧美</a>
          <a href="#">韩国</a>
          <a href="#">日本</a>
        </nav>
      </div>
      <div class="item-grid mv-grid">
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">向宿命挥拳的人 (...)</a>
          <a href="#" class="item-info nowrap">阿云嘎</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">雨</a>
          <a href="#" class="item-info nowrap">Sunnee杨芸晴</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">一爱如故 (...)</a>
          <a href="#" class="item-info nowrap">摩登兄弟刘宇宁</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">我很好骗</a>
          <a href="#" class="item-info nowrap">动力火车</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">造梦时学会飞行 (...)</a>
          <a href="#" class="item-info nowrap">TVB</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003RlAau1dFne3.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">What's Wrong With Me (Punk Version)</a>
          <a href="#" class="item-info nowrap">Lil Ghost小鬼</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102003c3tSe1ehWwN.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">Let's Party (...)</a>
          <a href="#" class="item-info nowrap">吴宣仪</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M0000013X2t31kvJC4.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">鋼の羽根</a>
          <a href="#" class="item-info nowrap">RADWIMPS</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003aYDEH2kWTX7.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">에필로그 (epilogue)</a>
          <a href="#" class="item-info nowrap">IU</a>
        </div>
        <div class="grid-item">
          <a href="#" class="cover-wrap">
            <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101000xHMCS1g3sSW.jpg" class="cover-img">
            <div class="cover-mask"></div>
            <div class="cover-play"></div>
          </a>
          <a href="#" class="item-title nowrap">圭贤《Coffee》MV</a>
          <a href="#" class="item-info nowrap">圭贤</a>
        </div>
      </div>
    </div>
  </main>
  
  <footer></footer>
</body>
</html>